<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts/echarts.min.js"></script>
</head>

<body>
    <div id="main" style="height: 300px;width: 600px;"></div>
    <script>
        const myChart = echarts.init(document.querySelector('#main'))
        const option = {
            // 标题
            title: {
                text: '班级每组薪资',
                left: 10
            },
            // 鼠标移入的提示
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            // 顶部圈圈提示
            // legend: {},
            // 调整内边距
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            // x轴
            xAxis: [{
                type: 'category',
                data: ['瘪三', '赵四', '老王', '费五', '老八', '老六', '根基']
            }],
            yAxis: [{
                type: 'value'
            }],
            // 图表内容
            series: [{
                    name: '期望薪资',
                    type: 'bar',
                    // 鼠标移入 隐藏其他柱子 自己高亮
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00db9f'
                            },
                            {
                                offset: 0.7,
                                color: '#4be5c2'
                            },
                            {
                                offset: 1,
                                color: '#b7f4e4'
                            }
                        ])
                    },
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '实际薪资',
                    type: 'bar',
                    // 堆叠柱子 相同的stark会堆叠在一起
                    stack: '1',
                    // 鼠标移入 隐藏其他柱子 自己高亮
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00abe8'
                            },
                            {
                                offset: 0.7,
                                color: '#00c6f5'
                            },
                            {
                                offset: 1,
                                color: '#a8e3fc'
                            }
                        ])
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
            ]
        };
        myChart.setOption(option)
    </script>
</body>

</html>